<template>
  <!-- 权限管理 -->
  <div class="permission-container">
    <div class="app-container">
      <el-card>
        <el-button type="primary" size="small" @click="handleOpen(1, '0')">
          添加权限
        </el-button>
        <el-table
          border
          stripe
          height="550"
          :data="permissionList"
          row-key="id"
          default-expand-all
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="text"
                v-if="row.type === 1"
                @click="handleOpen(2, row.id)"
              >
                添加权限点
              </el-button>
              <el-button type="text" @click="handleEditAdd(row.id)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 新增的弹层 -->
    <el-dialog :visible="showDialog" title="新增权限" @close="handleCloes">
      <!-- 表单内容 -->
      <el-form label-width="120px" ref="permForm">
        <el-form-item label="权限名称">
          <el-input v-model="permForm.name" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="permForm.code" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permForm.description" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限启用">
          <el-switch
            v-model="permForm.enVisible"
            active-value="1"
            inactive-value="0"
            active-text="已启用"
            inactive-text="未启用"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right">
          <el-button @click="handleCloes">取消</el-button>
          <el-button type="primary" @click="handleAdd"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑的弹层 -->
    <el-dialog :visible="isShow" title="编辑权限" @close="handleEditCloes">
      <!-- 表单内容 -->
      <el-form label-width="120px" ref="permForm">
        <el-form-item label="权限名称">
          <el-input v-model="permForm.name" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="permForm.code" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permForm.description" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限启用">
          <el-switch
            v-model="permForm.enVisible"
            active-value="1"
            inactive-value="0"
            active-text="已启用"
            inactive-text="未启用"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right">
          <el-button @click="handleEditCloes">取消</el-button>
          <el-button type="primary" @click="handleEdit"> 确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionsApi,
  addPermissionsApi,
  deletePermissionsApi,
  getPermDetailApi,
  putPermissionsApi,
} from "@/api/permissions";
import { list2Tree } from "@/utils/shift";
export default {
  name: "ViewsPermission",
  data() {
    return {
      // 权限树形列表
      permissionList: [],
      // 控制新增弹层
      showDialog: false,
      // 控制编辑弹层
      isShow: false,
      // 添加权限对象
      permForm: {
        name: "",
        description: "",
        code: "",
        enVisible: "1",
      },
    };
  },
  created() {
    this.getPermissions();
  },
  methods: {
    async getPermissions() {
      const { data } = await getPermissionsApi();
      this.permissionList = list2Tree(data, "0");
    },
    // 关闭弹层
    handleCloes() {
      this.showDialog = false;
      this.$refs.permForm.resetFields();
    },
    // 打开弹层
    handleOpen(type, pid) {
      this.type = type;
      this.pid = pid;
      this.showDialog = true;
    },
    // 添加权限点
    async handleAdd() {
      await addPermissionsApi({
        ...this.permForm,
        pid: this.pid,
        type: this.type,
      });
      // 重新获取权限列表
      this.getPermissions();
      // 关闭弹层
      this.handleCloes();
    },
    // 删除权限
    async handleDel(id) {
      try {
        await this.$confirm("确定要删除吗？", "温馨提示", {
          type: "warning",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        });
        await deletePermissionsApi(id);
        this.$message.success("删除成功");
        this.getPermissions();
      } catch (error) {
        this.$message.warning(error.message || "取消删除");
      }
    },
    // 关闭编辑弹层
    handleEditCloes() {
      this.isShow = false;
    },
    // 编辑回显
    async handleEditAdd(id) {
      this.isShow = true;
      const resp = await getPermDetailApi(id);
      this.permForm = resp.data;
    },
    // 编辑提交
    async handleEdit() {
      // 校验
      // 发起编请求
      try {
        await putPermissionsApi(this.permForm);
        // 关弹框
        this.handleEditCloes();
        // 获取权限列表
        this.getPermissions();
        this.$message.success("修改成功");
      } catch (error) {
        this.$message.warning(error.message);
      }
    },
  },
};
</script>

<style>
</style>